<template>
    <div class="h-screen flex flex-col justify-center items-center p-5 w-screen">
        <div class="flex justify-around">
                <div>
                    <el-avatar shape="square" class="w-7 h-7"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </div>
                <div class="ml-8">
                    <div class=" text-mid-size">{{userStore.userName}}</div>
                    <span class="text-custom-size text-gray-600">已入职100天</span>
                </div>
        </div>
        <div class="mt-1 w-screen bg-gray-300 p-0.5 rounded shadow-inner">
        </div>
        <div class="mt-1">
            <div>
                <span>打卡记录</span>
            </div>
            <el-scrollbar height="400px">
                <div v-for="item in cardData" :key="item.id"
                    class="flex justify-between items-center flex-col overflow-y-auto">
                    <div class=" flex border-solid ">
                        <div class="bg-white p-2 rounded text-custom-size text-gray-600">
                            {{ item.signInTime }}
                        </div>
                        <div class="bg-white p-2 rounded  text-custom-size text-gray-600">
                            {{ item.signInTime ? '已打卡' : '未打卡' }}
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getCard } from '@/api';
import { useUserStore } from '@/store/useUserStore';
import { ArrowRight } from '@element-plus/icons-vue'
const cardData = ref([]);
const userStore = useUserStore();

onMounted(() => {
    getCard(userStore.id).then(res => {
        console.log(res);
        cardData.value = res.data.data;
    });
});
</script>

<style>
/* 这里可以添加一些自定义的 Tailwind 样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>